<template>
  <div class="app-container" @click="hideContextMenu">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="设备品牌" prop="gasBrand">
        <el-input
          v-model="queryParams.wenshiBrand"
          placeholder="请输入设备品牌"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="设备型号" prop="gasModel">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.wenshiType"-->
      <!--          placeholder="请输入设备型号"-->
      <!--          clearable-->
      <!--          style="width: 240px"-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="状态" prop="wenshiState">
        <el-select
          v-model="queryParams.wenshiState"
          placeholder="状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.hmy_gas_state"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!--    去掉 列表形式 转换成盒子模块形式-->
    <el-row :gutter="20">
      <el-col :span="1" style="margin-top: 100px;margin-left: 20px">
        <svg class="icon" height="100" p-id="7126" t="1708502749876" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goleft">
          <path
            d="M745.09774 1024L232.934734 512.163005 745.09774 0l45.967526 45.967526-465.869468 466.195479L791.065266 978.032474l-45.967526 45.967526z"
            fill="#dbdbdb" p-id="7127"></path>
        </svg>
      </el-col>
      <el-col :span="20">
        <div class="scroll-container" @wheel="handleWheel">
          <el-row :gutter="30" class="table-body" style="margin-left: 20px;margin-right:20px ">
            <el-col v-for="(item, index) in gasList" :key="index"
                    :span="5"
                    class="function-card emessage-div"
                    style="margin-top: 20px"

            >
              <div @click="showDetails(item)"
                   @contextmenu.prevent="$event.preventDefault(); showContextMenu($event, item)">
                <el-card :body-style="{ padding: '0px' }" class="parent-icon" shadow="hover">

                  <i v-if="item.wenshiState==='1'" class="el-icon-success green-icon" title="运行"
                     @click.stop="icoeUp(item)"></i>
                  <!-- 否则，显示el-icon-circle-cross图标 -->
                  <!--            <i v-else-if="item.fansState==='2'" class="el-icon-warning orange-icon" @click.stop="icoeUp(item)"
                                 title="故障"></i>-->
                  <i v-else-if="item.wenshiState==='2'" class="el-icon-error rea-icon" title="关闭"
                     @click.stop="icoeUp(item)"></i>

                  <!--              <img src="/src/assests/images/scrape.png" height="140"/>-->
                  <svg class="icon" height="140" p-id="11124" t="1708426299061"
                       version="1.1"
                       viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M484.917 1023.771c-74.506 0-144.44-29.025-197.12-81.705-52.68-52.68-81.706-122.729-81.706-197.12 0-61.822 19.77-120.33 57.251-169.239 32.682-42.738 77.706-75.534 128.1-93.475V94.504C391.442 42.395 433.837 0 485.946 0c52.223 0 94.618 42.395 94.618 94.504v85.019h-45.71v-85.02c0-26.968-21.94-48.794-48.794-48.794-26.968 0-48.795 21.94-48.795 48.795v421.553l-16.57 4.685c-47.65 13.598-90.618 42.967-121.014 82.62-31.311 40.909-47.88 89.818-47.88 141.47 0 128.556 104.56 233.116 233.116 233.116s233.117-104.56 233.117-233.117c0-51.308-16.34-99.874-47.195-140.67-29.94-39.424-72.334-68.906-119.53-82.848l-16.454-4.685V222.032h45.709v261c49.823 18.283 94.39 51.08 126.614 93.704 36.91 48.794 56.451 106.96 56.451 168.324 0 74.506-29.025 144.44-81.705 197.12-52.566 52.68-122.5 81.591-197.007 81.591z"
                      p-id="11125"></path>
                    <path d="M461.474 637.236l1.137-310.594 45.71 0.167-1.138 310.594z" p-id="11126"></path>
                    <path
                      d="M484.917 884.358c-71.877 0-130.27-58.393-130.27-130.27s58.393-130.272 130.27-130.272 130.271 58.394 130.271 130.271-58.393 130.271-130.27 130.271z m0-214.833c-46.623 0-84.562 37.939-84.562 84.562s37.939 84.562 84.562 84.562 84.562-37.938 84.562-84.562-37.938-84.562-84.562-84.562z m310.594-573.65H654.156c-12.57 0-22.855-10.285-22.855-22.855s10.285-22.854 22.855-22.854H795.51c12.57 0 22.855 10.284 22.855 22.854S808.08 95.875 795.51 95.875z m-91.418 122.272h-49.937c-12.57 0-22.855-10.284-22.855-22.855s10.285-22.854 22.855-22.854h49.937c12.57 0 22.854 10.284 22.854 22.854s-10.284 22.855-22.854 22.855zM795.51 340.42H654.156c-12.57 0-22.855-10.284-22.855-22.854s10.285-22.855 22.855-22.855H795.51c12.57 0 22.855 10.285 22.855 22.855s-10.285 22.854-22.855 22.854z m-91.418 122.272h-49.937c-12.57 0-22.855-10.284-22.855-22.854s10.285-22.855 22.855-22.855h49.937c12.57 0 22.854 10.285 22.854 22.855s-10.284 22.854-22.854 22.854z"
                      p-id="11127"></path>
                  </svg>
                  <div style="padding: 14px;background-color: #f2f2f2" @click.stop="tableQuery(item)">
                    <el-row style="margin-bottom: 5px;border-bottom: 1px solid #8f939c;">
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 14px">设备品牌
                      </el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 14px">设备材质
                      </el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 14px">栏舍编码
                      </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px;">
                      <el-col :span="8" class="row-item"
                              style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;font-size: 14px">
                        {{
                          item.wenshiBrand
                        }}
                      </el-col>
                      <el-col :span="8" class="row-item"
                              style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;font-size: 14px">
                        {{
                          item.wenshiMaterial
                        }}
                      </el-col>
                      <el-col :span="8" class="row-item"
                              style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;font-size: 14px">
                        {{
                          item.phouseCode
                        }}
                      </el-col>
                      <el-col style="display: none">{{ item.fansId }}</el-col>
                    </el-row>
                  </div>

                </el-card>
              </div>

            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="2" style="margin-top: 100px">
        <svg class="icon" height="100" p-id="6924" t="1708502371103" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goright">
          <path
            d="M277.845333 1006.933333c-7.850667 0-16.042667-3.072-21.845333-9.216a30.788267 30.788267 0 0 1 0.341333-43.690666l445.781334-441.002667L256 69.973333a30.788267 30.788267 0 0 1 0-43.690666c11.946667-11.946667 31.744-12.288 43.690667 0L768 491.178667c5.802667 5.802667 9.216 13.653333 9.216 21.845333s-3.413333 16.042667-9.216 21.845333L299.690667 998.058667c-6.144 5.802667-13.994667 8.874667-21.845334 8.874666z"
            fill="#dbdbdb" p-id="6925"></path>
        </svg>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="11">

        <div style="margin-left: 50px;">
          <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="messageParams" size="small">
            <el-form-item label="栏舍编码" prop="queryParams">
              <el-select v-model="messageParams.equipmentPhouseCode" clearable filterable placeholder="请输入设备编码"
                         @change="tableQuery"
              >
                <el-option

                  v-for="item in parkList"
                  :key="item.equipmentPhouseCode"
                  :label="item.equipmentPhouseCode"
                  :value="item.equipmentPhouseCode"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" size="mini" @click="resetTable">重置</el-button>
            </el-form-item>
          </el-form>
          <div style="height: 300px; overflow-y: auto; ">
            <el-table
              v-loading="tableLoading"
              :data="messageList"
              height="300"
              style="width: 100%">
              <el-table-column
                fixed
                label="栏舍编码"
                prop="equipmentPhouseCode"
                width="100">
              </el-table-column>
              <el-table-column
                label="栏舍类型"
                prop="phouseType"
                width="100">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.hmy_park_type" :value="scope.row.phouseType"/>
                </template>
              </el-table-column>
              <el-table-column
                label="栏舍温度"
                prop="equipmentTemperature"
                width="100">
              </el-table-column>
              <el-table-column
                label="栏舍湿度"
                prop="equipmentHumidity"
                width="100">
              </el-table-column>
              <el-table-column
                label="时间"
                prop="creationDate"
                width="150">
                <template slot-scope="scope">
                  {{ scope.row.creationDate.slice(0, 16) }}
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-container">
          <div ref="chart" style="width: 100%; height: 430px;"></div>
        </div>
      </el-col>
    </el-row>
    <!--      保留编辑和删除-->
    <div
      v-if="contextMenuVisible"
      class="context-menu"
      :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }"
    >
      <ul>
        <li @click="handleUpdate">编辑</li>
        <li @click="handleDelete">删除</li>
      </ul>
    </div>


    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="设备品牌" prop="wenshiBrand">
              <el-input v-model="form.wenshiBrand" placeholder="请输入设备品牌"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="wenshiType">
              <el-input v-model="form.wenshiType" placeholder="请输入设备型号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备材质" prop="wenshiMaterial">
              <el-input v-model="form.wenshiMaterial" placeholder="请输入设备材质"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="栏舍编码" prop="queryParams">
              <el-select v-model="form.phouseCode" clearable filterable placeholder="请输入设备编码"
                         style="width: 240px">
                <el-option
                  v-for="item in parkCodeList"
                  :key="item.phouseCode"
                  :label="item.phouseCode"
                  :value="item.phouseCode"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="温度检测范围" prop="wenshiTemperatureRange">
              <el-input v-model="form.wenshiTemperatureRange" placeholder="请输入温度检测范围"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="湿度检测精度" prop="wenshiHumidityPrecision">
              <el-input v-model="form.wenshiHumidityPrecision" placeholder="请输入湿度检测精度"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="温度检测精度" prop="wenshiTemperaturePrecision">
              <el-input v-model="form.wenshiTemperaturePrecision" placeholder="请输入温度检测精度"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="湿度检测范围" prop="wenshiHumidityRange">
              <el-input v-model="form.wenshiHumidityRange" placeholder="请输入湿度检测范围"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="设备状态" prop="wenshiState">
          <el-radio-group v-model="form.wenshiState">
            <el-radio
              v-for="dict in dict.type.hmy_gas_state"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addWS, delWS, editWS, listWS, listWSById} from "@/api/hmy/ws"
import {findPhouseCode, findPhouseCodeAll, listEquipment} from "@/api/hmy/equipment"
import * as echarts from "echarts";

export default {
  name: "WS",
  dicts: ['sys_normal_disable', 'hmy_gas_state', 'hmy_gas_type', 'hmy_park_type'],
  data() {
    return {
      tableLoading: true,
      intervalId: null, // 用于存储定时器ID的变量
      parkCodeList: [],
      parkList: [],
      messageList: [],
      messageParams: {
        pageNum: 1,
        pageSize: 999,
        equipmentPhouseType: "",
        equipmentPhouseCode: ""
      },
      contextMenuVisible: false,
      contextMenuTop: 0,
      contextMenuLeft: 0,
      selectedContextItem: null,

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 气体检测仪表格数据
      gasList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 999,
        wenshiBrand: undefined,
        wenshiType: undefined,
        beginTime: undefined,
        endTime: undefined
      },
      // 表单参数
      form: {},
      rules: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    /** 查询环境信息 */
    // 组件挂载后开始轮询
    this.startPolling();
  },
  beforeDestroy() {
    // 组件销毁前停止轮询
    this.stopPolling();
  },
  methods: {
    fetchEquipment() {
      // 查询环境信息的方法
      listEquipment(this.messageParams).then(response => {
        this.messageList = response.rows;
        console.log(this.messageList);
        this.initChart();
      }).catch(error => {
        // 处理错误情况
        console.error('获取设备列表失败:', error);
      });
      /** 栏舍下拉选择 */
      findPhouseCode().then(response => {
          this.parkList = response.data;
        }
      );
    },
    startPolling() {
      // 启动轮询的方法
      this.fetchEquipment(); // 首次立即执行
      this.intervalId = setInterval(this.fetchEquipment, 1000 * 5); // 每5秒执行一次
    },
    stopPolling() {
      // 停止轮询的方法
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
    filteredParkCodeList() {

      return this.parkCodeList.filter(parkCode => {
        return !this.gasList.some(park => park.phouseCode === parkCode.phouseCode);
      });
    },
    resetTable() {
      this.messageParams.equipmentPhouseCode = ""
      this.tableQuery()
    },
    tableQuery(item) {
      console.log(item)
      if (item != null) {
        if (item.phouseCode != null) {
          this.messageParams.equipmentPhouseCode = item.phouseCode
        }
      }
      listEquipment(this.messageParams).then(response => {
          this.messageList = response.rows;
          this.initChart();
        }
      );
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart);
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '温度和湿度',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        legend: {
          data: ['温度', '湿度'],
          left: 10
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        axisPointer: {
          link: {
            xAxisIndex: 'all'
          }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 5,
            xAxisIndex: [0, 1], // 控制两个 xAxis 的 dataZoom
            bottom: 5 // 距离容器底部 20px
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 5,
            xAxisIndex: [0, 1], // 控制两个 xAxis 的 dataZoom
            bottom: 5 // 距离容器底部 20px

          }
        ],
        grid: [
          {
            left: 60,
            right: 50,
            height: '33%'
          },
          {
            left: 60,
            right: 50,
            top: '52%',
            height: '33%'
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: true},
            data: this.messageList.map(item => item.creationDate) // 第一个图表的 X 轴数据
          },
          {
            gridIndex: 1, // 指定属于第二个 grid
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: true},
            data: this.messageList.map(item => item.creationDate) // 第二个图表的 X 轴数据

          }
        ],
        yAxis: [
          {
            name: '温度(℃)',
            type: 'value',

          },
          {
            gridIndex: 1, // 指定属于第二个 grid
            name: '湿度(%)',
            type: 'value',
            inverse: true
          }
        ],
        series: this.seriesData() // 确保这个方法返回的是两个系列的数据
      };
      this.tableLoading = false;
      myChart.setOption(option);
    }, /** 动态生成折线图*/
    /** 动态生成折线图系列 */
    seriesData() {
      let series = [];
      this.parkList.forEach(cloud => {
        // 筛选出具有相同设备站房代码的messageList项
        const messageItems = this.messageList.filter(item => item.equipmentPhouseCode === cloud.equipmentPhouseCode);
        // 生成温度数据系列
        const temperatureSeries = {
          name: '温度 - ' + cloud.equipmentPhouseCode,
          type: 'line',
          symbolSize: 8,
          data: messageItems.map(item => item.equipmentTemperature)
        };

        // 生成湿度数据系列
        const humiditySeries = {
          name: '湿度 - ' + cloud.equipmentPhouseCode,
          type: 'line',
          symbolSize: 8,
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: messageItems.map(item => item.equipmentHumidity)
        };

        // 将生成的温度和湿度系列添加到系列数组中
        series.push(temperatureSeries);
        series.push(humiditySeries);
      });
      return series;
    },

    goright() {
      this.initChart()
      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft += 240;
    },
    goleft() {

      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft -= 240;
    },
    handleWheel(event) {
      // 阻止默认的滚动行为
      event.preventDefault();
      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      // 计算滚动距离
      const scrollAmount = event.deltaY;
      // 应用滚动距离到滚动容器的横向滚动
      container.scrollLeft += scrollAmount;
    },
    icoeUp(d) {
      if (d.wenshiState === '1') {
        d.wenshiState = '2'
      } else {
        d.wenshiState = '1'
      }
      editWS({"wenshiState": d.wenshiState, "wenshiId": d.wenshiId}).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    showDetails(item) {
      listWSById(item.wenshiId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看气体检测仪信息";
      });
    },
    /*右键显示*/
    showContextMenu(event, item) {
      this.contextMenuTop = event.clientY;
      this.contextMenuLeft = event.clientX;
      this.selectedContextItem = item;
      this.contextMenuVisible = true;
    },
    hideContextMenu() {
      this.contextMenuVisible = false;
    },
    /** 查询气体检测仪列表 */
    getList() {
      this.loading = true;
      /** 查询气体检测仪列表 */
      this.queryParams.beginTime = this.dateRange[0]
      this.queryParams.endTime = this.dateRange[1]
      listWS(this.queryParams).then(res => {
        this.gasList = res.rows
        this.total = res.total;
      });
      /** 查询环境信息 */
      listEquipment(this.messageParams).then(response => {
          this.messageList = response.rows;
          console.log(this.messageList)
          this.initChart();
        }
      );
      /** 栏舍下拉选择 */
      findPhouseCode().then(response => {
          this.parkList = response.data;
          console.log(this.parkList)
          this.loading = false;
        }
      );
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        wenshiId: undefined,
        wenshiType: undefined,
        wenshiBrand: undefined,
        wenshiMaterial: undefined,
        wenshiTemperatureRange: undefined,
        wenshiHumidityRange: undefined,
        wenshiTemperaturePrecision: undefined,
        wenshiHumidityPrecision: undefined,
        wenshiProduction: undefined,
        wenshiState: "1",
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.wenshiId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },


    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备";
      findPhouseCodeAll().then(response => {
        this.parkCodeList = response.data;
        this.parkCodeList = this.filteredParkCodeList()
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const item = this.selectedContextItem;
      listWSById(item.wenshiId).then(res => {
        this.form = res.data;
        this.open = true;
        this.title = "修改设备";
      })
      this.hideContextMenu();
    },

    /** 提交按钮 */
    submitForm: function () {
      if (this.form.wenshiId != undefined) {
        editWS(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addWS(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const item = this.selectedContextItem;
      this.$modal.confirm('是否确认删除设备编号为"' + item.wenshiId + '"的数据项？').then(function () {
        return delWS(item.wenshiId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
      this.hideContextMenu();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/role/export', {
        ...this.queryParams
      }, `role_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<!--添加样式-->
<style scoped>
.scroll-container {
  scroll-behavior: smooth;
  overflow-x: auto; /* 启用横向滚动 */
  white-space: nowrap; /* 防止内部元素换行 */
  margin: 0 auto; /* 覆盖因为 gutter 导致的外边距问题 */
  position: relative;
  max-height: 100%; /* 设置一个最大高度 */
  overflow: hidden; /* 隐藏原生滚动条 */
}

.table-body {
  display: flex; /* 使用 flex 布局 */
  flex-wrap: nowrap; /* 防止子元素换行 */
  margin: 20px 0; /* 根据需要调整内边距 */
}

.table-body .el-col {
  flex: 0 0 auto; /* 避免 flex 子项被压缩 */
  white-space: normal; /* 使列内的内容正常换行 */
}

.emessage-div {
  transition: transform 0.3s; /* 设置动画过渡效果 */
}

.emessage-div:hover {
  transform: scale(1.1); /* 鼠标悬浮时放大1.5倍 */
}

.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}

.parent-icon {
  position: relative;
}

.green-icon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: green;
  z-index: 9;
}

.rea-icon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: red;
  z-index: 9;
}

</style>
